<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="/mdui/css/mdui.min.css">
    <script defer src="/mdui/js/mdui.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/vue.js"></script>
    <style>
        .mdui-table {
            border: 1px solid #d6d6d6;
        }

        a {
            text-decoration: none;
        }

        .mdui-table td img {
            border: 1px solid #d6d6d6;
            height: 100px;
            width: 140px;
        }

        h3 {
            font-weight: normal;
        }

        .mdui-table {
            width: 1000px;
        }

        .container {
            width: 300px;
        }

        .mdui-table tr {
            width: 500px;
        }
    </style>

</head>
<div class="container">
    <div id="app">
        <h3>您好{{student.name}}</h3>
        <table class="mdui-table">
            </thead>
            <tbody>
            <tr>
                <td>头像</td>
                <td class="img-hight"><img :src="'/student/downlode/' + student.id">
                </td>
            </tr>
            <tr>
                <td>姓名</td>
                <td>{{student.name}}</td>
            </tr>
            <tr>
                <td>性别</td>
                <td>{{student.sexual|fmtGenter}}</td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td>{{student.email}}</td>
            </tr>
            <tr>
                <td>电话</td>
                <td>{{student.phone}}</td>
            </tr>
            <tr>
                <td>宿舍</td>
                <td>{{student.door}}</td>
            </tr>

            </tbody>
        </table>
    </div>
</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            student: {
                id: '',
                name: "",
                sexual: "",
                email: "",
                phone: "",
                door: "",
                pic: ""
            },
        },
        created() {
            let _this = this
            axios.get("/student/findStudent")
                .then(function (res) {
                    _this.student = res.data;
                })
        },
        filters: {
            fmtGenter(val) {

                if (val == 1) {
                    return "女"
                } else if (val == 2) {
                    return "男"
                }
            }
        },
    })

</script>
</body>
</html>